<template>
  <div class="all-anchor">
    <el-scrollbar>
    <div class="scrollbar-flex-content">
      <div v-for="(item,index) in AllUserList" :key="item.userInfo?.uid" 
        :class="['scrollbar-demo-item',index==4&&'right']">
        <img :src="item.userInfo?.smallPic" alt="">
        <div class="anchor-info">
          <div class="info-title">{{ item.userInfo?.nickname }}</div>
          <div class="info-num">
            <van-icon name="user-o" />
            <span> {{ (item.userInfo?.followers_counts/10000).toFixed(2) }}万</span>
          </div>
        </div>
      </div>
    </div>
  </el-scrollbar>
  </div>
</template>

<script setup lang="ts">
import { AnyObjType } from '../../../charts/api/chartsApi';

defineProps<{
  AllUserList:AnyObjType[]
}>()

</script>

<style scoped lang="less">
.scrollbar-flex-content {
  display: flex;
}
:deep(.el-scrollbar__bar.is-horizontal){
    height:0 !important;
  }
.scrollbar-demo-item {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 10px;
  &.right{
    padding-right: 20px;
  }
  img{
    width:36px;
    height:36px;
    border-radius: 50%;
    margin-right:5px;
  }
  .anchor-info{
    min-height:36px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    .info-title{
      font-size:14px;
    }
    .info-num{
      font-size:12px;
      color:#999;
    }
  }
}
</style>